<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #container {
            /*地图(容器)显示大小*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="container"></div>
    </div>
</body>
<script src="./vue.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=7XBBZ-LWG6W-BV6RL-RYKXJ-DNRXQ-6PFAC"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            map: null,
            markerLayer: null,
            locations: [
                { label: '怡和中心', lng: 113.219392, lat: 22.93224 },
                { label: '美的总部', lng: 113.219841, lat: 22.934821 },
                { label: '北滘行政中心', lng: 113.217842, lat: 22.934487 },
            ]
        },
        mounted() {
            // 设置中心点
            var center = new TMap.LatLng(this.locations[0].lat, this.locations[0].lng);
            // 初始化地图
            this.map = new TMap.Map('container', {
                center: center,
                zoom: 15
            });

            // 构造点标记数据
            const geometries = this.locations.map((loc, idx) => ({
                id: String(idx + 1),
                styleId: 'myStyle',
                position: new TMap.LatLng(loc.lat, loc.lng),
                properties: {
                    title: loc.label
                }
            }));
            

            // 创建并初始化MultiMarker
            this.markerLayer = new TMap.MultiMarker({
                map: this.map,
                styles: {
                    "myStyle": new TMap.MarkerStyle({
                        "width": 40,
                        "height": 40,
                        "src": './marker.png', // 请确保有marker.png图片
                        "anchor": { x: 16, y: 32 }
                    }),
                },
                geometries: geometries
            });

            //初始化label
            var label = new TMap.MultiLabel({
                id: 'label-layer',
                map: this.map,
                styles: {
                    'label': new TMap.LabelStyle({
                        'color': '#3777FF',
                        'size': 14,
                        'offset': { x: 0, y: 15 },
                        'angle': 0,
                        'alignment': 'center',
                        'verticalAlignment': 'middle'
                    })
                },
                geometries: this.locations.map((loc, idx) => ({
                    id: 'label_' + (idx + 1),
                    styleId: 'label',
                    position: new TMap.LatLng(loc.lat, loc.lng),
                    content: loc.label
                }))
            });

            // 监听点标记点击事件
            this.markerLayer.on('click', (evt) => {
                console.log(evt);
                const item = evt.geometry;
                alert('点击了：' + item.properties.title + '\n经度：' + item.position.lng + '\n纬度：' + item.position.lat);
            });
        }
    })
</script>

</html>